<template>
    <div class="content">
		<h1>新增景点</h1>
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="景点名称" prop="name">
					<el-input v-model="ruleForm.name"></el-input>
				</el-form-item>
				<el-form-item label="背景图">
					<el-upload class="upload-demo"  ref="upload" action=""   :file-list="fileList" :limit="1" :auto-upload="false" :on-change="changeUp">
						<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
						<el-button style="margin-left: 10px;"  size="small" type="success" @click="submitUpload">上传到服务器</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>	
						<div  slot="tip" v-if="remin" class="remin">请选择背景图</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="时间组">
					<el-button type="primary" @click="dialogVisible=true">添加</el-button>
				</el-form-item>
				<template>
					<el-table class="table1" :data="tableDatal" style="width: 80%">
						<el-table-column label="时间" >
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.time}}</span>
							</template>
						</el-table-column>
						<el-table-column label="图片">
							<template slot-scope="scope">
								<div class="imgBox">
									<img :src="scope.row.img" />
								</div>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="mini" @click="handleEdit(scope.$index)">修改</el-button>
								<el-button size="mini" type="danger" @click="deleteRow(scope.$index)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
				<el-form-item>
						<el-button class="btn" type="primary" @click="submit('ruleForm')">立即提交</el-button>
				</el-form-item>
			</el-form>
			<el-dialog :visible.sync="dialogVisible" style="margin-top:8vh;" width="60%">
				<h2>增加 时间组</h2>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
					<el-form-item label="时间">
						<template>
							<el-select v-model="value" @change="seleBtn(options[value-1].label)" placeholder="请选择时间" :picker-options="{
								start: '08:30',
								step: '00:15',
								end: '18:30'
							}">
								<el-option
									v-for="item in options"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									:disabled="item.disabled"
									>
								</el-option>
							</el-select>
					</template>
					</el-form-item>
					<el-form-item label="图片" prop="img">
						<el-upload class="upload-demo" ref="upload" action="" :file-list="fileList" :on-change="tchangeUp" :auto-upload="false" :limit="1">
							<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
							<el-button style="margin-left: 10px;" size="small" type="success" @click="tsubmitUpload">上传到服务器</el-button>
							<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，每次只能上传一张,最大不超过5mb</div>
						</el-upload>
					</el-form-item>
					<el-form-item> 
						<el-row>
							<el-button type="primary" @click="submitForm">确认</el-button>
						</el-row>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
   
				</span>
			</el-dialog>

			<!-- 修改时间组 -->
			<el-dialog :visible.sync="editVisible" style="margin-top:8vh;" width="60%">
				<h2>修改 时间组</h2>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
					<el-form-item label="时间">
						<template>
							<el-select v-model="value1"  placeholder="请选择时间">
								<el-option :value="value1">
								</el-option>
							</el-select>
					</template>
					</el-form-item>
					<el-form-item label="图片" prop="img">
						<el-upload class="upload-demo" ref="upload" action="" :file-list="fileList" :on-change="XchangeUp" :auto-upload="false" :limit="1">
							<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
							<el-button style="margin-left: 10px;" size="small" type="success" @click="XsubmitUpload">上传到服务器</el-button>
							<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，每次只能上传一张,最大不超过5mb</div>
						</el-upload>
					</el-form-item>
					<el-form-item> 
						<el-row>
							<el-button type="primary" @click="XsubmitForm">确认</el-button>
						</el-row>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
   
				</span>
			</el-dialog>
		</div>
	</div>

</template>

<script>
export default {
    	data() {
			return {
				dialogVisible: false,
				editVisible:false,
				value1: '',
				ruleForm: {
					name: '',
					region:'',
					date1:'',
				},
					//时间选择
	        options: [{
		          value: '1',
		          label: '00:00'
		        }, {
		          value: '2',
		          label: '00:30'
		        }, {
		          value: '3',
		          label: '01:00'
		        }, {
		          value: '4',
		          label: '01:30'
		        }, {
		          value: '5',
		          label: '02:00'
		        }, {
		          value: '6',
		          label: '02:30'
		        }, {
		          value: '7',
		          label: '03:00'
		        }, {
		          value: '8',
		          label: '03:30'
		        }, {
		          value: '9',
		          label: '04:00',
		        }, {
		          value: '10',
		          label: '04:30'
		        }, {
		          value: '11',
		          label: '05:00'
		        }, {
		          value: '12',
		          label: '05:30'
		        }, {
		          value: '13',
		          label: '06:00'
		        }, {
		          value: '14',
		          label: '06:30'
		        }, {
		          value: '15',
		          label: '07:00',
		        }, {
		          value: '16',
		          label: '07:30',
		        }, {
		          value: '17',
		          label: '08:00',
		        }, {
		          value: '18',
		          label: '08:30',
		        }, {
		          value: '19',
		          label: '09:00'
		        }, {
		          value: '20',
		          label: '09:30'
		        }, {
		          value: '21',
		          label: '10:00'
		        }
		        , {
		          value: '22',
		          label: '10:30'
		        }
		        , {
		          value: '23',
		          label: '11:00'
		        }
		        , {
		          value: '24',
		          label: '11:30'
		        }
		        , {
		          value: '25',
		          label: '12:00'
		        }, {
		          value: '26',
		          label: '12:30'
		        }, {
		          value: '27',
		          label: '13:00'
		        }, {
		          value: '28',
		          label: '13:30'
		        }, {
		          value: '29',
		          label: '14:00'
		        } , {
		          value: '30',
		          label: '14:30'
		        }, {
		          value: '32',
		          label: '15:00'
		        }, {
		          value: '33',
		          label: '15:30'
		        }, {
		          value: '34',
		          label: '16:00'
		        }, {
		          value: '35',
		          label: '16:30'
		        }, {
		          value: '36',
		          label: '17:00'
		        }, {
		          value: '37',
		          label: '17:30'
		        }, {
		          value: '38',
		          label: '18:00'
		        }, {
		          value: '39',
		          label: '18:30'
		        }, {
		          value: '40',
		          label: '19:00'
		        }, {
		          value: '41',
		          label: '19:30'
		        }, {
		          value: '42',
		          label: '20:00'
		        }, {
		          value: '43',
		          label: '20:30'
		        }, {
		          value: '44',
		          label: '21:00'
		        }, {
		          value: '45',
		          label: '21:30'
		        }, {
		          value: '46',
		          label: '22:00'
		        }, {
		          value: '47',
		          label: '22:30'
		        }, {
		          value: '48',
		          label: '23:00'
		        }, {
		          value: '49',
		          label: '23:30'
						}],
						value:'',
						time:"",
				rules: {
					name: [{
							required: true, message: '请输入活动名称', trigger: 'blur'
					}],
					date1:[{ type: 'date', required: true, message: '请选择时间', trigger: 'change'
					}],
					region: [{
						message: '请选择背景图',
						trigger: 'blur'
					}],
					img: [{
						message: '请选取图片',
						trigger: 'blur'
					}]
				},
				updataImg:this.$config.uploadImg,
				formData:new FormData(),
				formData1:new FormData(),
				fileList: [],
				fileList1:[],
				tableDatal:[],
				imgUrl:"",
				imgUrl1:"",
				table:{},
				baseUrl:this.$config.baseUrl,
				value1:'',
				timeArr:[],
				edit:'',
				remin:false
			}

		},
		methods: {
			
			//上传文件
			changeUp(file,fileList){
				this.formData.append("files",file.raw);
			},
			//上传服务器
			submitUpload() {
				this.$require.post(this.$config.uploadImg,this.formData)
				// this.$require.post(this.$config.uploadImg,this.formData)
				.then((res)=>{
					this.$refs.upload.clearFiles()
					this.message();
					console.log(res)
					if(res.data.data.img_url!=undefined){
							this.imgUrl=res.data.data.img_url
						}else{
							this.imgUrl=res.data.data.img_url_array[res.data.data.img_url_array.length-1]
						}
						console.log(this.imgUrl)
					})
					.catch((err)=>{
							this.error()
					})
			},

			//成功提醒
			message(){
					this.$notify({
          title: '成功',
          message: '这是一条成功的提示消息',
					type: 'success',
					duration:2000
        });
			},

			//失败提醒
			error(){
				this.$notify.error({
          title: '失败',
					message: '提交失败',
					duration:2000
        });
			},


			//提交成功
			succmsg(){
				this.$message({
          message: '提交成功',
          type: 'success'
        });
			},
			//添加时间组
				//选择时间
				seleBtn(idx){
	      		this.time=idx
					},
					//上传文件
					tchangeUp(file,fileList){
						this.formData.append("files",file.raw);
					},
						//上传服务器
					tsubmitUpload() {
						this.$require.post(this.$config.uploadImg,this.formData)
						.then((res)=>{
							this.$refs.upload.clearFiles()
							console.log(res)
							if(res.data.data.img_url!=undefined){
								this.imgUrl1=res.data.data.img_url
							}else{
								this.imgUrl1=res.data.data.img_url_array[res.data.data.img_url_array.length-1]
							}
							console.log(this.imgUrl1)
						})
					},
					//添加到后台
					submitForm() {
						// this.time=this.time,
						// this.img = this.imgUrl,
						this.timeArr.push(this.time)//使用过的时间
						this.dialogVisible=false;
						console.log(this.timeArr)
						console.log(this.options[0].label)
						this.$require.post(this.$config.addTime,{
							img_url:this.imgUrl1,
							time_string:this.time
						})
						.then((res)=>{
							console.log(res)
							this.tableDatal.push({
								img:this.baseUrl+res.data.data.img_url,
								time:res.data.data.time_string
							});
							console.log(this.tableDatal)
						})
						.catch((err)=>{
							console.log(err)
						})


						//循环对比是否有使用过的时间
						for(let i=0;i<this.options.length;i++){
							for(let j=0;j<this.timeArr.length;j++){
								if(this.options[i].label==this.timeArr[j]){
									console.log(this.options[i].label);
									this.options[i].disabled=true//添加一个属性
								}
							}
						}
						console.log(this.options)
					},
					//修改
					handleEdit(id){
						this.editVisible=true;
						this.value1=this.time;
						this.edit=id;
						console.log(id);
						// this.$require.post(this.$config.timeUpdate,{
						// 	// img_url:
						// 	imgUrl:this.imgUrl1,
						// 	time_string:this.time

						// })
						// .then((res)=>{
						// 	console.log(res)
						// })
					},
					// 删除
					deleteRow(aa){
						console.log(aa)
						console.log(this.tableDatal)

						this.tableDatal.splice(aa,1);
						console.log(this.tableDatal)
					},
						// 上传文件
						XchangeUp(file,fileList){
						this.formData.append("files",file.raw);
					},
						//上传服务器
					XsubmitUpload() {
						this.$require.post(this.$config.uploadImg,this.formData)
						.then((res)=>{
							alert("上传成功")
							console.log(res)
							if(res.data.data.img_url!=undefined){
								this.imgUrl1=res.data.data.img_url
							}else{
								this.imgUrl1=res.data.data.img_url_array[res.data.data.img_url_array.length-1]
							}
							console.log(this.imgUrl1)
						})
					},

					// 修改时间组确定
					XsubmitForm(){
						this.editVisible=false;
						this.$refs.upload.clearFiles()
						console.log(this.timeArr)
						console.log(this.options[0].label)
						console.log(this.imgUrl1)
						this.$require.post(this.$config.timeUpdate,{
							img_url:this.imgUrl1,
							index:this.edit,
							time_string:this.time
						})
						.then((res)=>{
							console.log(res)
							// this.tableDatal.push({
							// 	img:this.baseUrl+res.data.data.img_url,
							// 	time:res.data.data.time_string
							// });
							console.log(this.tableDatal)
						})
						.catch((err)=>{
							console.log(err)
						})
					},


			resetForm(formName) {
				this.$refs[formName].resetFields();
			},

			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			submit(formName){
				// console.log(this.imgUrl)
				this.$refs[formName].validate((valid) => {
          if (valid &&this.imgUrl!="") {
						this.remin=false;
						this.succmsg();
							this.$require.post(this.$config.newAttractions,{
							bg_url:this.imgUrl,
							name:this.ruleForm.name,
							time_id_array:""
						})
						.then((res)=>{
							this.$router.push({
								path:"/strategy"
							})
						})
						
          } else {
						this.error();
						this.remin=true
            return false;
          }
				});
			}

		},
		created(){
			
		}
}
</script>

<style lang="scss" scoped="scoped">
 $htitle:32px; //标题文字大小
	.el-table .cell {
		white-space: nowrap;
	}
	
	.startegy {
		padding: 0 30px;
	}
	
	.el-row {
		margin-bottom: 20px;
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.el-col {
		border-radius: 4px;
	}
	
	.el-table td,
	.el-table th {
		padding: 12px 0;
	}
	
	.el-button--mini,
	.el-button--mini.is-round {
		padding: 12px 20px;
	}
	
	.el-table .cell {
		background-color: #000;
	}
	
	h1 {
		font-size: $htitle;
		margin: 21px 0;
	}
	
	.el-input--suffix .el-input__inner {
		padding-right: 30px;
	}
	
	h2 {
		margin: 15px 0;
	}
	.table1{
		margin: 0 auto;
	}
	.btn{
		margin-top: 20px;
	}
	.imgBox{
		width:200px;
		height: 100px;
		overflow: hidden;
		img{
			width: 100%;
		}
	}
	.remin{
		line-height: 0;
		font-size: 12px;
		color: #F56C6C;
	}
</style>